<template>
  <div class="category">
    <el-card shadow="always" class="margin30" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>分类管理</span>
      </div>
      <div class="box">
        <el-card v-for="item in leju" :key="item.id" class="item" shadow="always" :body-style="{ padding: '20px' }">
          <div slot="header">
            <span>{{ item.name }}</span>
          </div>
          <div class="parent">
            <el-upload
              class="upload-demo"
              action="https://leju.bufan.cloud/lejuAdmin/material/uploadFileOss"
              :headers="headers"
              :on-success="el =>getUploadImg(el,item)"
            >
              <el-button class="btn" size="small" type="primary">点击上传</el-button>
            </el-upload>
            <img :src="item.icon" alt="">
          </div>

        </el-card>

      </div>
      <el-table v-if="list.length !=0" :data="list" border row-key="id" :tree-props="{children:'children1'}">
        <el-table-column
          prop="name"
          label="菜单名称"
        />
        <el-table-column
          prop="id"

          label="icon"
        >
          <template v-slot="scope">
            <!-- {{ scope.row.category.icon }} -->
            <img :src="scope.row.icon" alt="">
          </template>
        </el-table-column>
      </el-table>

    </el-card>

  </div>
</template>

<script>
import {
  getAllCategory,
  updateCategory
} from '@/api/goodsManage/category/index.js'
import {
  getToken
} from '@/utils/myAuth.js'
export default {
  data() {
    return {
      list: [],
      leju: [],
      headers: {
        token: getToken()
      }
    }
  },
  computed: {

  },
  created() {
    this.init()
  },
  mounted() {

  },
  methods: {
    init() {
      getAllCategory()
        .then(res => {
          console.log(res)
          this.leju = res.data.items.find(el => el.category.name == '乐居').children
          var arr = res.data.items.map(el => {
            return {
              ...el.category,
              children1: el.children
            }
          })
          console.log(arr)
          this.list = arr
        })
    },
    getUploadImg(val, val1) {
      console.log('val', val, val1)
      val1.icon = val.data.fileUrl
      updateCategory(val1)
        .then(res => {
          this.init()
        })
      // 更新操作:在原有数据基础之上  修改数据  再把修改的数据整体提交过去
      // updateCategory()
    }
  }
}
</script>
<style>
/* .el-upload{
            width: 100%;
            height: 100%;
          } */
</style>
<style scoped lang="scss">
.category{
  .box{
    display: flex;
    align-items: center;
    .item{
      width: 24%;
      margin-right: 10px;
      .parent{
        position: relative;
        .upload-demo{
          position: absolute;
          width: 100%;
          height: 100%;
          opacity: 0;
          top: 0;
          left: 0;
          ::v-deep .el-upload{
            width: 100%;
            height: 100%;
          }
          .btn{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    img{
      width: 100%;
      height: 300px;
    }
  }
}
</style>
